<template>
 <div class="reg-box">
        <main>
            <van-form @submit="submitUserInfo">
                    <!-- 用户编码 -->
                    <van-field 
                        v-model="userList.id" 
                        name="用户编码" 
                        label="用户编码" 
                        placeholder="用户编码"
                        :rules="[{ required: true, message: '请填写用户编码' }]" />

                    <!-- 用户名 -->
                    <van-field 
                    v-model="userList.name" 
                    name="用户名" 
                    label="用户名" 
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />

                    <!-- 密码 -->
                    <van-field 
                    v-model="userList.password" 
                    name="密码" 
                    label="密码" 
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />

                <!-- 选择性别 -->
                <van-field name="sex" label="性别">
                    <template #input>
                        <van-dropdown-menu>
                            <van-dropdown-item 
                            v-model="userList.sex" 
                            :options="[
                                { text: '男', value: '男' },
                                { text: '女', value: '女' },
                            ]" />
                        </van-dropdown-menu>
                    </template>
                </van-field>

                <!-- 选择省市区 -->
                <van-field
                    v-model="userList.address"
                    is-link
                    readonly
                    name="area"
                    label="地区选择"
                    placeholder="点击选择省市区"
                    @click="showAddr = true"
                    />

                <!-- 详细地址 -->
                <van-field 
                    v-model="addrDetail" 
                    name="详细地址" 
                    label="详细地址" 
                    placeholder="详细地址"
                    :rules="[{ required: true, message: '请填写详细地址' }]" />

                <!-- 选择日期 -->
                <van-field
                    v-model="userList.birthday"
                    is-link
                    readonly
                    name="birthday"
                    label="生日"
                    placeholder="点击选择时间"
                    @click="showDate = true"
                    />

                    <van-field 
                    v-model="userList.phone" 
                    name="手机号" 
                    label="手机号" 
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />

                    <van-field 
                    v-model="userList.email" 
                    name="邮箱" 
                    label="邮箱" 
                    placeholder="邮箱"
                    :rules="[{ required: true, message: '请填写邮箱' }]" />

                    <van-field
                        v-model="userList.remark"
                        rows="2"
                        autosize
                        label="备注"
                        type="textarea"
                        maxlength="100"
                        placeholder="请输入备注"
                        show-word-limit
                    />
                    
                <!-- 提交按钮 -->
                <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit"
                    color="linear-gradient(to right, #ff6034, #ee0a24)">
                    提交
                </van-button>
            </div>
            </van-form>
            
        </main>

        <!-- 地区选择弹出框 -->
        <van-popup v-model:show="showAddr" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="selectAddr"
                @cancel="showAddr = false"
            />
        </van-popup>

        <!-- 日历选择弹出框 -->
        <van-popup v-model:show="showDate" position="bottom">
            <van-date-picker 
            @confirm="selectDate" 
            @cancel="showDate = false" 
            :min-date="minDate" 
            :max-date="maxDate" />
        </van-popup>

    </div>
</template>


<script setup>
import {reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
import { areaList } from '@vant/area-data';
import { userAdd } from '../../apis/loginApi';
import { showSuccessToast,showFailToast } from 'vant'

let userList = reactive({
            id:'',
            name: '', 
            password: '', 
            sex: '', 
            address: '', 
            birthday: '', 
            phone:'',
            email: '', 
            remark: '',
            money:0,
            cart:[],
            addressList:[]
        })
let addrDetail = ref('')
const router = useRouter()


let showAddr = ref(false)
let showDate = ref(false)
let minDate = ref(new Date(new Date().getFullYear() - 75,0,1))
let maxDate = ref(new Date(new Date().getFullYear() - 1,12,30))


//提交事件
async function submitUserInfo(){
    let userInfo = JSON.parse(JSON.stringify(userList))

    userInfo.address = userInfo.address + '-' + addrDetail.value
    let {data} = await userAdd(userInfo)
    // console.log(data);
    if(data.code === 200){
        showSuccessToast(data.message)
        router.push('/login')
    }else{
        showFailToast(data.message)
    }
}

//选择地区
function selectAddr(val){
    let { selectedOptions }  = val
    // console.log(selectedOptions);
    userList.address = selectedOptions.map(item=>item.text).join('-')
    // console.log(userList.address);
    showAddr.value = false
}

//选择生日
function selectDate(val){
// console.log(val);
    let {selectedValues} = val
    userList.birthday = selectedValues.join('-')
    showDate.value = false
}

</script>


<style lang="less" scoped>
/deep/.van-haptics-feedback{
    width: 160px;
    box-shadow: none !important;
}
.van-cell{
    /deep/.van-popup{
    margin-left: 114px;
    width: 160px;
    border-radius: 0 0 10px 10px;
}
    
}

</style>